﻿<!doctype html>
<html class="no-js " lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<meta name="description" content="Responsive Bootstrap 4 and web Application ui kit.">
<title>业主用户界面</title>
<link rel="icon" href="favicon.ico" type="image/x-icon"> <!-- Favicon-->
<link rel="stylesheet" href="/static/assets/plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="/static/assets/plugins/jvectormap/jquery-jvectormap-2.0.3.min.css"/>
<link rel="stylesheet" href="/static/assets/plugins/morrisjs/morris.min.css" />
<link rel="stylesheet" href="/static/assets/css/main.css">
<link rel="stylesheet" href="/static/assets/css/color_skins.css">
<link rel="stylesheet" href="/layui/css/layui.css">
    <style>
        .arrearage_Query,.park_Query,.repairs_Query{
            display: none;
        }
    </style>
</head>
<body class="theme-purple">
<!-- Page Loader -->
<div class="page-loader-wrapper">
    <div class="loader">
        <div class="m-t-30"><img class="zmdi-hc-spin" src="/static/assets/images/logo.svg" width="48" height="48" alt="Oreo"></div>
        <p>Please wait...</p>
    </div>
</div>
<!-- Overlay For Sidebars -->
<div class="overlay"></div>

<!-- Top Bar -->
<nav class="navbar p-l-5 p-r-5" style="height: 60px">
    <ul class="nav navbar-nav navbar-left">
        <li>
            <div class="navbar-header">
                <a href="javascript:void(0);" class="bars"></a>
                <a class="navbar-brand" href="index.html" style="margin-top: 15px;"><img src="/static/assets/images/logo.svg" width="30" alt="Oreo"><span class="m-l-10">业主信息界面</span></a>
            </div>
        </li>
        <li>
            <ul class="dropdown-menu pullDown">
                <li class="body">
                    <ul class="menu list-unstyled">
                        <li>
                            <a href="javascript:void(0);">
                                <div class="media">
                                    <img class="media-object" src="/static/assets/images/xs/avatar2.jpg" alt="">
                                    <div class="media-body">
                                        <span class="name">Sophia <span class="time">30min ago</span></span>
                                        <span class="message">There are many variations of passages</span>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">
                                <div class="media">
                                    <img class="media-object" src="/static/assets/images/xs/avatar3.jpg" alt="">
                                    <div class="media-body">
                                        <span class="name">Sophia <span class="time">31min ago</span></span>
                                        <span class="message">There are many variations of passages of Lorem Ipsum</span>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">
                                <div class="media">
                                    <img class="media-object" src="/static/assets/images/xs/avatar4.jpg" alt="">
                                    <div class="media-body">
                                        <span class="name">Isabella <span class="time">35min ago</span></span>
                                        <span class="message">There are many variations of passages</span>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">
                                <div class="media">
                                    <img class="media-object" src="/static/assets/images/xs/avatar5.jpg" alt="">
                                    <div class="media-body">
                                        <span class="name">Alexander <span class="time">35min ago</span></span>
                                        <span class="message">Contrary to popular belief, Lorem Ipsum random</span>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">
                                <div class="media">
                                    <img class="media-object" src="/static/assets/images/xs/avatar6.jpg" alt="">
                                    <div class="media-body">
                                        <span class="name">Grayson <span class="time">1hr ago</span></span>
                                        <span class="message">There are many variations of passages</span>
                                    </div>
                                </div>
                            </a>
                        </li>
                    </ul>
                </li>
                <li class="footer"> <a href="javascript:void(0);">View All</a> </li>
            </ul>
        </li>
    </ul>
</nav>

<!-- Left Sidebar -->
<aside id="leftsidebar" class="sidebar">
    <ul class="nav nav-tabs">
        <li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#dashboard"><i class="zmdi zmdi-home m-r-5"></i>Oreo</a></li>
        <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#user"><i class="zmdi zmdi-account m-r-5"></i>1234</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane stretchRight active" id="dashboard">
            <div class="menu">
                <ul class="list">
                    <li>
                        <div class="user-info">
                            <div class="image"><a href="#"><img src="/static/assets/images/profile_av.jpg" alt="User"></a></div>
                            <div class="detail">
                                <h4 class="user_Name">${userLogin}</h4>
                                <small>XX小区业主</small>
                            </div>
                            <a title="facebook" href="#"><i class="zmdi zmdi-facebook"></i></a>
                            <a title="twitter" href="#"><i class="zmdi zmdi-twitter"></i></a>
                            <a title="instagram" href="#"><i class="zmdi zmdi-instagram"></i></a>
                        </div>
                    </li>
                    <li class="header">主菜单</li>
                    <li class="active open"> <a href="javascript:void(0);" class="menu-toggle"><i class="zmdi zmdi-home"></i><span>信息查询</span></a>
                        <ul class="ml-menu">
                            <li class="active qianfei_manage"><a href="#">欠费信息</a> </li>
                            <li class="car_manage"><a href="#">停车信息</a></li>
                        </ul>
                    </li>
                   
                    <li> <a href="javascript:void(0);" class="menu-toggle"><i class="zmdi zmdi-shopping-cart"></i><span>在线报修</span> </a>
                        <ul class="ml-menu">
                            <li class="baoxiu_manage"> <a href="#">登记报修详情</a></li>
                        </ul>
                    </li>
                    <li> <a href="javascript:void(0);" class="menu-toggle"><i class="zmdi zmdi-swap-alt"></i><span>在线投诉</span> </a>
                        <ul class="ml-menu">
                            <li class="tousu_manage"> <a href="#">登记投诉意见</a> </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</aside>

<!-- Main Content -->
<section class="content home">
    <div class="block-header">
        <div class="row">
            <div class="col-lg-5 col-md-5 col-sm-12">
                <h2 style="color: #fff;">1234</h2>
                <small style="color: #fff;">欢迎使用XX小区物业管理信息系统</small>
            </div>
        </div>
    </div>
    <div class="card weather">
        <div class="header">
            <h2><strong>天气</strong></h2>
        </div>
        <div class="body">
            <div class="city">
                <span>晴空万里</span>
                <h3 class="city_Name"></h3>
                <img src="/static/assets/images/weather/summer.svg" alt="">
            </div>
            <ul class="row days list-unstyled m-b-0">
                <li>
                    <h5>周一</h5>
                    <img src="/static/assets/images/weather/sky.svg" alt="">
                    <span class="degrees">5℃</span>
                </li>
                <li>
                    <h5>周二</h5>
                    <img src="/static/assets/images/weather/rain.svg" alt="">
                    <span class="degrees">5℃</span>
                </li>
                <li>
                    <h5>周三</h5>
                    <img src="/static/assets/images/weather/summer.svg" alt="">
                    <span class="degrees">5℃</span>
                </li>
                <li>
                    <h5>周四</h5>
                    <img src="/static/assets/images/weather/summer.svg" alt="">
                    <span class="degrees">5℃</span>
                </li>
                <li>
                    <h5>周五</h5>
                    <img src="/static/assets/images/weather/cloudy.svg" alt="">
                    <span class="degrees">5℃</span>
                </li>
                <li>
                    <h5>周六</h5>
                    <img src="/static/assets/images/weather/summer.svg" alt="">
                    <span class="degrees">5℃</span>
                </li>
                <li>
                    <h5>周日</h5>
                    <img src="/static/assets/images/weather/cloudy.svg" alt="">
                    <span class="degrees">5℃</span>
                </li>
            </ul>
        </div>
    </div>

    <div class="container-fluid">
       <!--投诉列表   start-->
		<div class="container-fluid info_Table tousu_manage_div" style="display: none">
			 <button class="layui-btn layui-btn-sm" onclick="toushuAdd()">添加投诉信息</button>
			 <table  id="tousuTable" lay-filter="tousuTableDemo"></table>		    
		</div>
		 <!--投诉列表   end-->
       <!--投诉列表   start-->
		<div class="container-fluid info_Table baoxiu_manage_div" style="display: none">
			 <button class="layui-btn layui-btn-sm" onclick="baoxiuAdd()">添加维修信息</button>
			 <table  id="baoxiuTable" lay-filter="baoxiuTableDemo"></table>		    
		</div>
		 <!--投诉列表   end-->
       <!--投诉列表   start-->
		<div class="container-fluid info_Table car_manage_div" style="display: none">
			 <!-- <button class="layui-btn layui-btn-sm" onclick="carAdd()">天加投诉信息</button> -->
			 <table  id="carTable" lay-filter="carTableDemo"></table>		    
		</div>
		 <!--投诉列表   end-->
       <!--投诉列表   start-->
		<div class="container-fluid info_Table qianfei_manage_div" style="display: none">
			 <!-- <button class="layui-btn layui-btn-sm" onclick="carAdd()">天加投诉信息</button> -->
			 <table  id="qianfeiTable" lay-filter="qianfeiTableDemo"></table>		    
		</div>
		 <!--投诉列表   end-->
    </div>
</section>
<!-- Jquery Core Js -->
<script src="/static/assets/bundles/libscripts.bundle.js"></script> <!-- Lib Scripts Plugin Js ( jquery.v3.2.1, Bootstrap4 js) -->
<script src="/static/assets/js/user.js?c=1.2"></script>
<script src="/static/assets/js/login.js"></script>
<script src="/static/assets/bundles/vendorscripts.bundle.js"></script> <!-- slimscroll, waves Scripts Plugin Js -->

<script src="/static/assets/bundles/mainscripts.bundle.js"></script>
<!--<script src="assets/js/pages/index.js"></script>-->
<script src="/layui/layui.js"></script>
<!--<script src="assets/js/pages/index.js"></script>-->
<script type="text/html" id="toushuBarDemo">
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/html" id="toushuComplaintStateTle">
  {{#  if(d.complaintState == 0){ }}
    <span style="color: #F581B1;">未处理</span>
  {{#  } else { }}
   <span>已处理</span>
  {{#  } }}
</script>
<script type="text/html" id="baoxiuBarDemo">
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/html" id="baoxiuGuaranteeStateTle">
  {{#  if(d.guaranteeState == 0){ }}
    <span style="color: #F581B1;">未处理</span>
  {{#  } else { }}
   <span>已处理</span>
  {{#  } }}
</script>
<script type="text/html" id="qianfeiBarDemo">
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">缴费</a>
</script>

<script type="text/html" id="qianfeidTle">
  {{#  if(d.userElectricityFee == 0){ }}
    <span style="color: #F581B1;">欠费</span>
  {{#  } else { }}
   <span>已缴费</span>
  {{#  } }}
</script>
<script type="text/html" id="qianfeiwTle">
  {{#  if(d.userPropertyFee == 0){ }}
    <span style="color: #F581B1;">欠费</span>
  {{#  } else { }}
   <span>已缴费</span>
  {{#  } }}
</script>
<script type="text/html" id="qianfeisTle">
  {{#  if(d.userWaterFee == 0){ }}
    <span style="color: #F581B1;">欠费</span>
  {{#  } else { }}
   <span>已缴费</span>
  {{#  } }}
</script>
<script type="text/html" id="qianfeirTle">
  {{#  if(d.userAirFee == 0){ }}
    <span style="color: #F581B1;">欠费</span>
  {{#  } else { }}
   <span>已缴费</span>
  {{#  } }}
</script>
<script type="text/javascript">
var laydate //日期
,laypage //分页
,layer //弹层
,table //表格
,carousel //轮播
,element; //元素操作
$(function(){
	var userName = '${userLogin}';
	//$("#id").show(); //显示  
	layui.config({
		  version: '1522709297490' //为了更新 js 缓存，可忽略
		});
		 
		layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element'], function(){
		  laydate = layui.laydate ;//日期
		  laypage = layui.laypage ;//分页
		  layer = layui.layer ;//弹层
		  table = layui.table ;//表格
		  carousel = layui.carousel; //轮播
		  element = layui.element; //元素操作
		  
		 
		  //执行一个 table 实例
		  table.render({
		    elem: '#tousuTable'
		    ,height: 332
		 	,id: 'tousuReload'
		    ,url: '/userComplaint/selectUserComplaintPageList' //数据接口
		    ,page: true //开启分页
		    ,cols: [[ //表头
		      {field: 'complaintId', title: 'ID', width:230, sort: true}
		      ,{field: 'complaintType', title: '投诉类别', width:200}
		      ,{field: 'complaintDesc', title: '投诉描述', width:200, sort: true}
		      ,{field: 'complaintState', title: '是否处理', width:200,templet: '#toushuComplaintStateTle'} 
		      ,{field: 'complaintDate', title: '投诉时间', width:200} 
		      ,{fixed: 'right', width: 200, title:'操作',align:'center', toolbar: '#toushuBarDemo'}
		    ]]
		  });
		  //监听工具条
		  table.on('tool(tousuTableDemo)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
		    var data = obj.data //获得当前行数据
		    ,layEvent = obj.event; //获得 lay-event 对应的值
		    if(layEvent === 'detail'){
		      layer.msg('查看操作');
		    } else if(layEvent === 'del'){
		      layer.confirm('真的删除行么', function(index){
		    	  $.ajax({
		    		    //几个参数需要注意一下
		    		        type: "POST",//方法类型
		    		       	async:false, 
		    		       	data:{complaintId :data.complaintId},
		    		        dataType: "json",//预期服务器返回的数据类型
		    		        url: "/userComplaint/deleteUserComplaint" ,//url
		    		      
		    		        success: function (data) {
		    		            if (data.statue) {
		    		            	
		    		            	layer.msg('删除成功', {icon: 1});
		    		            	obj.del(); //删除对应行（tr）的DOM结构
		    		            	table.reload('tousuReload', {
		    		          	        page: {
		    		          	          curr: 1 //重新从第 1 页开始
		    		          	        }
		    		          	      });
		    		  		        layer.close(index);
		    		            }else{
		    		            	layer.msg('删除失败');
		    		            	 layer.close(index);
		    		            }
		    		            ;
		    		        },
		    		        error : function() {
		    		            
		    		        }
		    		    });  
		      
		        //向服务端发送删除指令
		        
		      });
		    } 
		  });
		  
		  //执行一个 table 实例 保修
		  table.render({
		    elem: '#baoxiuTable'
		    ,height: 332
		 	,id: 'baoxiuReload'
		    ,url: '/userGuarantee/selectUserGuaranteePageList' //数据接口
		    ,page: true //开启分页
		    ,cols: [[ //表头
		      {field: 'guarantee_id', title: 'ID', width:230, sort: true}
		      ,{field: 'guaranteeDesc', title: '投诉描述', width:400, sort: true}
		      ,{field: 'guaranteeState', title: '是否处理', width:230,templet: '#baoxiuGuaranteeStateTle'} 
		      ,{fixed: 'right', width: 230, title:'操作',align:'center', toolbar: '#baoxiuBarDemo'}
		    ]]
		  });
		  //监听工具条
		  table.on('tool(baoxiuTableDemo)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
		    var data = obj.data //获得当前行数据
		    ,layEvent = obj.event; //获得 lay-event 对应的值
		    if(layEvent === 'detail'){
		      layer.msg('查看操作');
		    } else if(layEvent === 'del'){
		      layer.confirm('真的删除行么', function(index){
		    	  $.ajax({
		    		    //几个参数需要注意一下
		    		        type: "POST",//方法类型
		    		       	async:false, 
		    		       	data:{guarantee_id :data.guarantee_id},
		    		        dataType: "json",//预期服务器返回的数据类型
		    		        url: "/userGuarantee/deleteUserGuarantee" ,//url
		    		      
		    		        success: function (data) {
		    		            if (data.statue) {
		    		            	
		    		            	layer.msg('删除成功', {icon: 1});
		    		            	obj.del(); //删除对应行（tr）的DOM结构
		    		            	table.reload('baoxiuReload', {
		    		          	        page: {
		    		          	          curr: 1 //重新从第 1 页开始
		    		          	        }
		    		          	      });
		    		  		        layer.close(index);
		    		            }else{
		    		            	layer.msg('删除失败');
		    		            	 layer.close(index);
		    		            }
		    		            ;
		    		        },
		    		        error : function() {
		    		            
		    		        }
		    		    });  
		      
		        //向服务端发送删除指令
		        
		      });
		    } 
		  });
		  //执行一个 table 实例 欠费
		  table.render({
		    elem: '#qianfeiTable'
		    ,height: 332
		 	,id: 'qianfeiReload'
		    ,url: '/user/getUserHomeDetailPageList'
		    ,page: true //开启分页
		    ,cols: [[ //表头
		      {field: 'userHomeId', title: 'ID', width:230, sort: true,hidden: true}
		      ,{field: 'userElectricityFee', title: '电费', width:230, templet: '#qianfeidTle'}
		      ,{field: 'userPropertyFee', title: '物业费', width:230,templet: '#qianfeiwTle'} 
		      ,{field: 'userWaterFee', title: '水费', width:230,templet: '#qianfeisTle'} 
		      ,{field: 'userAirFee', title: '燃气费', width:230,templet: '#qianfeirTle'} 
		      ,{fixed: 'right', width: 230, title:'操作',align:'center', toolbar: '#qianfeiBarDemo'}
		    ]]
		  });
		  //监听工具条
		  table.on('tool(qianfeiTableDemo)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
		    var data = obj.data //获得当前行数据
		    ,layEvent = obj.event; //获得 lay-event 对应的值
		    if(layEvent === 'detail'){
		      layer.msg('查看操作');
		    } else if(layEvent === 'del'){
		      layer.confirm('缴费', function(index){
		    	  $.ajax({
		    		    //几个参数需要注意一下
		    		        type: "POST",//方法类型
		    		       	async:false, 
		    		       	data:{userHomeId :data.userHomeId},
		    		        dataType: "json",//预期服务器返回的数据类型
		    		        url: "/user/updateUserFee" ,//url
		    		      
		    		        success: function (data) {
		    		            if (data.success) {
		    		            	
		    		            	layer.msg('缴费成功', {icon: 1});
		    		            	obj.del(); //删除对应行（tr）的DOM结构
		    		            	table.reload('baoxiuReload', {
		    		          	        page: {
		    		          	          curr: 1 //重新从第 1 页开始
		    		          	        }
		    		          	      });
		    		  		        layer.close(index);
		    		            }else{
		    		            	layer.msg('缴费失败');
		    		            	 layer.close(index);
		    		            }
		    		            ;
		    		        },
		    		        error : function() {
		    		            
		    		        }
		    		    });  
		      
		        //向服务端发送删除指令
		        
		      });
		    } 
		  });
		  //执行一个 table 实例 car
		  table.render({
		    elem: '#carTable'
		    ,height: 332
		 	,id: 'carReload'
		    ,url: '/car/getUserCarPageList' //数据接口
		    ,page: true //开启分页
		    ,cols: [[ //表头
		      {field: 'userCarId', title: 'ID', width:230, sort: true}
		      ,{field: 'usercarCard', title: '车牌号', width:400, sort: true}
		      ,{field: 'carParkName', title: '车位名称', width:400, sort: true}
		      
		    ]]
		  });
		  //监听工具条
		  table.on('tool(carTableDemo)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
		    var data = obj.data //获得当前行数据
		    ,layEvent = obj.event; //获得 lay-event 对应的值
		    if(layEvent === 'detail'){
		      layer.msg('查看操作');
		    } else if(layEvent === 'del'){
		      layer.confirm('真的删除行么', function(index){
		    	  $.ajax({
		    		    //几个参数需要注意一下
		    		        type: "POST",//方法类型
		    		       	async:false, 
		    		       	data:{guarantee_id :data.guarantee_id},
		    		        dataType: "json",//预期服务器返回的数据类型
		    		        url: "/userGuarantee/deleteUserGuarantee" ,//url
		    		      
		    		        success: function (data) {
		    		            if (data.statue) {
		    		            	
		    		            	layer.msg('删除成功', {icon: 1});
		    		            	obj.del(); //删除对应行（tr）的DOM结构
		    		            	table.reload('baoxiuReload', {
		    		          	        page: {
		    		          	          curr: 1 //重新从第 1 页开始
		    		          	        }
		    		          	      });
		    		  		        layer.close(index);
		    		            }else{
		    		            	layer.msg('删除失败');
		    		            	 layer.close(index);
		    		            }
		    		            ;
		    		        },
		    		        error : function() {
		    		            
		    		        }
		    		    });  
		      
		        //向服务端发送删除指令
		        
		      });
		    } 
		  });
		   
	});
});	
function baoxiuAdd(){
	layer.open({
		  title:"",
		  type: 2,
		  area: ['700px', '250px'],
		  fixed: false, //不固定
		  closeBtn :0,
		  btn: ['确定', '关闭'],
		  btnAlign: 'c',//按钮居中排序
		  anim: 5,
		  maxmin: false,
		  content: '/userGuarantee/baoxiuFormPage',
		  end: function () {
			  
          },yes: function (index,layero){
        	  var bool = $(layero).find("iframe")[0].contentWindow.add();
        	  if(bool){
        		  table.reload('baoxiuReload', {
          	        page: {
          	          curr: 1 //重新从第 1 页开始
          	        }
          	      });
        	  }
        	 
        	  
          },btn2 :function(index,layero){
        	  return true;
          }
          
		});
}
function toushuAdd(){
	layer.open({
		  title:"",
		  type: 2,
		  area: ['700px', '250px'],
		  fixed: false, //不固定
		  closeBtn :0,
		  btn: ['确定', '关闭'],
		  btnAlign: 'c',//按钮居中排序
		  anim: 5,
		  maxmin: false,
		  content: '/userComplaint/tousuFormPage',
		  end: function () {
			  
          },yes: function (index,layero){
        	  var bool = $(layero).find("iframe")[0].contentWindow.add();
        	  if(bool){
        		  table.reload('tousuReload', {
          	        page: {
          	          curr: 1 //重新从第 1 页开始
          	        }
          	      });
        	  }
        	 
        	  
          },btn2 :function(index,layero){
        	  return true;
          }
          
		});
}
</script>

</body>
</html>